<template>
  <div
    class="departments"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-card class="box-card">
      <tree-tool :treeNode="company" :isRoot="true" @addDepts="doAdd" />
      <el-divider></el-divider>
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="id"
        :default-expand-all="true"
        :expand-on-click-node="false"
      >
        <tree-tool
          slot-scope="{ data }"
          :treeNode="data"
          @delDepts="getDeptList"
          @addDepts="doAdd"
          @editDepts="doEdit"
        />
      </el-tree>
    </el-card>
    <new-add
      :pid="currentId"
      @addDepts="getDeptList"
      :showDialog.sync="showDialog"
      ref="addDept"
    />
  </div>
</template>

<script>
import treeTool from "./components/tree-tool.vue";
import newAdd from "./components/newAdd.vue";
import { getDepartments, editDepartments } from "@/api/departments";
import { getTree } from "@/utils/index";
export default {
  name: "depts",
  components: {
    treeTool,
    newAdd,
  },
  data() {
    return {
      loading: true,
      showDialog: false,
      currentId: "",
      company: { name: "黑马最大交友中心", manager: "负责人" },
      data: [
        {
          id: 1,
          name: "总裁办",
          manager: "刘备",
          children: [
            { id: 11, name: "董事长", manager: "刘禅" },
            { id: 12, name: "HR总监", manager: "诸葛亮" },
          ],
        },
        { id: 2, name: "总经理", manager: "关羽" },
        { id: 3, name: "注册经理", manager: "赵云" },
      ],
      defaultProps: {
        label: "name",
        children: "children",
      },
    };
  },
  created() {
    this.getDeptList();
  },
  methods: {
    async getDeptList() {
      this.loading = true;
      let res = await getDepartments();
      // console.log(res);
      this.company.name = res.data.companyName;
      this.company.id = "";
      let list = res.data.depts;
      let arr = getTree(list, "");
      this.data = arr;
      this.loading = false;
    },
    doAdd(id) {
      this.showDialog = true;
      this.currentId = id;
      // console.log(this.currentId);
    },
    doEdit(id) {
      this.showDialog = true;
      this.currentId = id;
      this.$refs.addDept.editDepartments(id);
    },
  },
};
</script>

<style scoped>
.box-card {
  margin: 20px;
  padding-left: 30px;
  padding-top: 140px;
}
</style>